<template>
  <div class="app">
     <CanvasTest key="CanvasTest" />
    <transition-group name="pass">
      <!-- three.js练习 -->
      <!-- <DrawCircle key="DrawCircle" @next="setPage(1)" /> -->
      <!-- <ChooseCircle key="ChooseCircle" /> -->
      <!-- <WaterWave key="WaterWave" /> -->
      <!-- <MorphTarget key="MorphTarget" /> -->
      <!-- <VertexColors key="VertexColors" /> -->
      <!-- <Parallaxbarrier key="Parallaxbarrier" /> -->
      <!-- <PointCube key="PointCube" /> -->
      <!-- <BufferGeometryTest key="BufferGeometryTest" /> -->
      <!-- <CameraArray key="CameraArray" /> -->
      <!-- <EffectsAscii key="EffectsAscii" /> -->
      <!-- <TextGeometryPrc key="TextGeometryPrc" /> -->
      <!-- <ScenePrc key="ScenePrc" /> -->
      <!-- <ScenePrc1 key="ScenePrc1" /> -->
      <!-- <TexturePrc key="TexturePrc" /> -->
      <!-- <FogPrc key="FogPrc" /> -->
      <!-- <RenderTargetPrc key="RenderTargetPrc" /> -->
      <!-- 螺旋圆圈 -->
      <!-- <SpiralCircle key="SpiralCircle" /> -->
      <!-- 云层流动的3D地球 -->
      <!-- <Earth3D key="Earth3D" /> -->
      <!-- 跳动火苗 -->
      <!-- <UvAnimation key="UvAnimation" /> -->


      <!-- <FlyClouds key="FlyClouds" /> -->
      <!-- <SpecularTexture key="SpecularTexture" /> -->
      <!-- <StickParticle key="StickParticle" /> -->
      <!-- <StickParticle1 key="StickParticle1" /> -->
      <!-- <WordEnter key="WordEnter" /> -->
    </transition-group>

  </div>
</template>
<script lang="ts">
import { Vue, Options, Provide } from 'vue-property-decorator';
import CanvasTest from './components/CanvasTest.vue';
import DrawCircle from './components/DrawCircle.vue';
import DrawCircle1 from './components/DrawCircle1.vue';
import ChooseCircle from './components/ChooseCircle.vue';
import WaterWave from './components/WaterWave.vue';
import WordEnter from './components/WordEnter.vue';
import StickParticle from './components/StickParticle.vue';
import StickParticle1 from './components/StickParticle1.vue';
import MorphTarget from './components/threeJSPrc/MorphTarget.vue';
import VertexColors  from './components/threeJSPrc/VertexColors.vue';
import Parallaxbarrier  from './components/threeJSPrc/Parallaxbarrier.vue';
import PointCube  from './components/threeJSPrc/PointCube.vue';
import SpecularTexture  from './components/threeJSPrc/SpecularTexture.vue';
import BufferGeometryTest  from './components/threeJSPrc/BufferGeometryTest.vue';
import FlyClouds  from './components/threeJSPrc/FlyClouds.vue';
import CameraArray  from './components/threeJSPrc/CameraArray.vue';
import EffectsAscii  from './components/threeJSPrc/EffectsAscii.vue';
import TextGeometryPrc  from './components/threeJSPrc/TextGeometryPrc.vue';
import ScenePrc  from './components/threeJSPrc1/ScenePrc.vue';
import ScenePrc1  from './components/threeJSPrc1/ScenePrc1.vue';
import TexturePrc  from './components/threeJSPrc1/TexturePrc.vue';
import FogPrc  from './components/threeJSPrc1/FogPrc.vue';
import RenderTargetPrc  from './components/threeJSPrc1/RenderTargetPrc.vue';
import SpiralCircle  from './components/threeJSPrc1/SpiralCircle.vue';
import Earth3D  from './components/threeJSPrc1/Earth3D.vue';
import UvAnimation  from './components/threeJSPrc1/UvAnimation.vue';

import wuwei from './libs/wuwei';
@Options({ components: {
  CanvasTest,
  DrawCircle,
  DrawCircle1,
  ChooseCircle,
  WaterWave,
  WordEnter,
  StickParticle,
  StickParticle1,
  MorphTarget,
  VertexColors,
  Parallaxbarrier,
  PointCube,
  SpecularTexture,
  BufferGeometryTest,
  FlyClouds,
  CameraArray,
  EffectsAscii,
  TextGeometryPrc,
  ScenePrc,
  ScenePrc1,
  TexturePrc,
  FogPrc,
  RenderTargetPrc,
  SpiralCircle,
  Earth3D,
  UvAnimation,
} })
export default class App extends Vue {
  @Provide() wuwei = wuwei;
  public page = 4;

  public setPage(page: number) {
    this.page = page;
  }
}
</script>

<style lang="postcss">
.app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  position: absolute;
  width: 100%;height: 100%;
}
</style>
